<template>
  <div class="p-4">
    <el-card>
      <!-- 头部按钮 -->
      <div class="flex">
        <div
          class="flex items-center inline-block p-2 rounded-lg bg-[#f4f5f6] mr-2 cursor-pointer"
          @click="handleCreatUserClick"
        >
          <User class="w-5 h-5 mr-2" />
          <div class="text-sm font-bold">创建用户</div>
        </div>
        <div
          class="flex items-center inline-block p-2 rounded-lg bg-[#f4f5f6] cursor-pointer"
          @click="handleSearchClick"
        >
          <Search class="w-5 h-5 mr-2" />
          <div class="text-sm font-bold">搜索</div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="mb-4">
        <el-table :data="tableData" table-layout="fixed" style="width: 100%">
          <el-table-column label="用户" min-width="280">
            <template #default="scope">
              <div class="flex">
                <div>
                  <img src="../../assets/setting/logo.jpg" class="w-11 h-11" />
                </div>
                <div class="flex-1 ml-3 pr-10 flex-col">
                  <div>{{ scope.row.name }}</div>
                  <div>{{ "123456789@qq.com" }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="角色">
            <template #default="scope">
              <span>{{ scope.row.role }}</span>
            </template>
          </el-table-column>
          <el-table-column label="使用的储存空间">
            <template #default="scope">
              <span>{{ scope.row.usedStorage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最大储存">
            <template #default="scope">
              <span>{{ scope.row.maxStorage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建于" min-width="150">
            <template #default="scope">
              <span>{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="行动" min-width="140">
            <!-- <template #default="scope"> -->
            <template>
              <div class="flex">
                <div
                  class="inline-block p-1 rounded-lg bg-[#f4f5f6] hover:cursor-pointer hover:bg-theme mr-4"
                >
                  <Edit class="w-5 h-5" />
                </div>
                <div
                  class="inline-block p-1 rounded-lg bg-[#f4f5f6] hover:cursor-pointer hover:bg-theme"
                >
                  <Delete class="w-5 h-5" />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div>
        <el-pagination layout="prev, pager, next" background :total="100" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 列表数据
const tableData: any = [
  {
    name: "Tom",
    role: "用户",
    usedStorage: "0%",
    maxStorage: "5GB",
    date: "07. 12月. 2023",
  },
];
// 头部按钮点击事件
const handleCreatUserClick = () => {
  console.log("创建用户");
};
const handleSearchClick = () => {
  console.log("搜索");
};
</script>

<style scoped lang="scss"></style>
